<template>
    <div>
        <Card>
            <Row class="form-row">
                <Button type="primary" icon="md-add" @click="handleAdd()">
                    新增
                </Button>
            </Row>

            <Table stripe border :loading="tableLoading" :columns="tableColumn" :data="tableData" ref="table">
                <!-- 操作 -->
                <!--<template slot="action" slot-scope="props">-->
                <!--</template>-->
            </Table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
        <Modal v-model="formVisible" :title="name" class="modal-content" width="900" :mask-closable="false">
            <Form :model="modal" :rules="rule" ref="formCoty" label-position="right" :label-width="120"
                  class="myOpenFrom">
                <Row>

                    <FormItem label="小区" prop="housingId">
                        <el-select v-model="modal.housingId" filterable default-first-option placeholder="请选择小区"
                                   style="width:100%" :clearable="true">
                            <el-option v-for="item in houseL" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </FormItem>

                    <FormItem label="费用类型" prop="name">
                        <Input v-model="modal.name" placeholder="请输入费用类型"/>
                    </FormItem>
                    <FormItem label="单价" prop="unitPrice">
                        <Input v-model="modal.unitPrice" placeholder="请输入单价"/>
                    </FormItem>
                    <FormItem label="公式" prop="typeInt">
                        <RadioGroup v-model="modal.typeInt">
                            <Radio label="1">面积*单价*月份</Radio>
                            <Radio label="2">单价*月份</Radio>
                        </RadioGroup>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="handlePrintSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
    </div>
</template>


<script>
    import Treeselect from "@riophae/vue-treeselect";
    //校验规则
    const rules = {
        housingId: [{
            required: true,
            message: "请选择小区"
        }],
        name: [
            {
                required: true,
                message: "请输入费用类型",
                trigger: "blur"
            }
        ],
        unitPrice: [
            {
                required: true,
                message: "请输入单价",
                trigger: "blur"
            }
        ],
        typeInt: [
            {
                required: true,
                message: "请选择公式",
                trigger: "change"
            }
        ],
    };

    //加载数据
    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.filters;
        params.parentId = this.filters.treeid;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;

        //与后台交换数据
        this.postRequest("/api/costType/loadData", params).then(res => {
            console.log(res);
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //打开页面
    let handleAdd = function (id) {
        let url = "/api/costType/openUpdate?id";
        this.modal = {};
        if (id) {
            url = "/api/costType/openUpdate?id=" + id;
            this.getRequest(url).then(res => {
                this.tableLoading = false;
                if (res.code == 20000) {
                    this.houseL = res.data.list;
                    this.modal = res.data.costType;
                    this.modal.id = res.data.costType.id;
                    this.modal.housingId = res.data.costType.housingId;
                    this.modal.costTypeName = res.data.costType.name;
                    this.modal.unitPrice = res.data.costType.unitPrice;
                    this.modal.typeInt = String(res.data.costType.typeInt);
                    this.formVisible = true;
                } else {
                    this.$Message.error({
                        content: res.message,
                        duration: 5
                    });
                }
            });
        } else {
            this.getRequest(url).then(res => {
                this.tableLoading = false;
                this.formVisible = true;
                this.houseL = res.data.list;
            });
        }
    };
    //点击新增费用类型弹窗的保存按钮
    let handlePrintSubmit = function () {
        this.$refs['formCoty'].validate((valid) => {
            if (valid) {
                this.formLoading = true;
                this.saveCoty();
            }
        });
    };
    //保存
    let saveCoty = function () {
        console.log(this.modal);
        this.postRequest("/api/costType/saveOrUpdate", this.modal).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.formLoading = false;
                this.formVisible = false;
                this.loadData();
                this.$Message.success("保存成功！");
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //点击新增费用类型弹窗的取消按钮
    let onCancel = function () {
        this.$refs["formCoty"].resetFields();
        this.formLoading = false;
        this.formVisible = false;
    };
    //删除
    let handleDelete = function (id) {
        console.log(id);
        this.getRequest("/api/costType/delete?id=" + id).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.formLoading = false;
                this.formVisible = false;
                this.loadData();
                this.$Message.success("删除成功！");
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        })
    }

    export default {
        name: "houseList",
        components: {
            Treeselect
        },
        data() {
            return {
                name: "",
                deptList: [],
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //验证规则
                rule: rules,
                //小区集合
                houseL: [],

                //表格数据
                tableData: [],
                //表格字段
                tableColumn: [
                    {
                        title: "ID",
                        key: "id"
                    },
                    {
                        title: "小区",
                        key: "housingName"
                    },
                    {
                        title: "费用类型",
                        key: "name"
                    },
                    {
                        title: "费用类型编号",
                        key: "costno"
                    },
                    {
                        title: "单价",
                        key: "unitPrice"
                    },
                    {
                        title: "公式",
                        key: "typeInt",
                        render: (h, params) => {
                            let _this = this;
                            let texts = "";
                            if (params.row.typeInt == 1) {
                                texts = "面积*单价*月份";
                            } else if (params.row.typeInt == 2) {
                                texts = "单价*月份";
                            }
                            return h(
                                "div",
                                {
                                    props: {}
                                },
                                texts
                            );
                        }
                    },
                    {
                        key: "action",
                        title: "操作",
                        align: "center",
                        width: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'mini'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        padding: '5px 14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleAdd(params.row.id)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'mini'
                                    },
                                    style: {
                                        padding: '5px 14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleDelete(params.row.id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                //数据表格隐藏那个状态
                tableLoading: false,
                //对话框隐藏状态
                formVisible: false,
                //表单提交状态
                formLoading: false,
                modal: {},
            };
        },
        created: function () {
            this.loadData();
        },
        methods: {
            loadData,
            handleAdd,
            handlePrintSubmit,
            saveCoty,
            onCancel,
            handleDelete,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    };
</script>

<style lang="less">
</style>
